<template>
	<view class="pages">
		<!-- 背景图 -->
		<image class="pages-bgimg" src="/static/images/common/top-bgimg.png" mode="scaleToFill"></image>
		<view class="" style="width: 100%;height: 126rpx;"></view>
		<!-- 管理员信息 -->
		<view class="my-top-box  ">
			<view class="user-info fcc">
				<image class="avatar" src="userInfo.avatar" mode="scaleToFill"></image>
				<view class="" style="width: 100%;height: 80rpx;"></view>
				<!-- <view class="fc-0  fw-6 fs-lg">
					{{userInfo.name}}
				</view> -->
				<view class="level mt-20 mb-20 mt-10 mb-10">
					管理级别
				</view>
				<!-- <view class="fc-0 mt-10 mb-30">
					{{userInfo.area_level_name}} | 业绩分润比例{{userInfo.area_level_rate}}
				</view> -->
			</view>
			<view class="row-box pt-20 pb-20" style="border-top: 1px solid #EBEBEB;">
				<view class="fcc " style="flex: 1;">
					<view class="fs-sm">
						管理区域
					</view>
					<view class="fs-lg fc-0">
						山东省
					</view>
				</view>
				<view class="" style="width: 1px;height: 84rpx;background-color: #EBEBEB;">

				</view>
				<view class="fcc " style="flex: 1;">
					<view class="fs-sm">
						管理门店
					</view>
					<view class="fs-lg fc-0">
						0家门店
					</view>
				</view>
			</view>
		</view>
		<!-- 管理门店列表 -->
		<view class="" style="width: 100%;height: 20rpx;">

		</view>
		<view class="pages-card m-auto ">
			<view class="row-box ">
				<view class="flex">
					<text class="fc-3 fw-6">功能菜单</text>
				</view>
			</view>
			<view class="list-box">
				<view class="item-box" :class="{'item-link':item!==(pagesList.length-1)}"
					v-for="(item,index) in pagesList" :key="index">
					<view class="">
						<text class="fc-3 mr-10">门店名称</text>
						<text class="item-targ">直营</text>
					</view>
					<view class="row-box mt-10 mb-20">
						<text>待结算业绩:<text class="fc-warn">18.88W</text></text>
						<text>累计业绩:<text class="fc-ac">28.88W</text></text>
					</view>
					<view class="align-items-center">
						<u-icon name="map-fill" color="#00A191" size="16"></u-icon>
						<text>地址信息</text>
					</view>
					<view class=""></view>
				</view>
			</view>
		</view>

		<view class="fc-9 fs-sm mt-20" style="text-align: center;">
			赞赞来客 | 提供技术支持
		</view>
	</view>

</template>

<script>
	import {
		apiGetSelffetchInfo
	} from '@/api/area.js'
	export default {
		data() {
			return {
				userInfo: null,
				dividendList: [],
				pagesList: []
			};
		},
		async onLoad() {
			// this.userInfo = await this.getUserinfo()
			this.getSelffetchInfo()
			// this.setDividendList()
		},
		methods: {
			async getSelffetchInfo() {
				let res = await apiGetSelffetchInfo()
				console.log(res)
			},
			setDividendList() {
				this.dividendList = [{
						title: '累计分润(元)',
						value: '555.55'
					},
					{
						title: '已提现(元)',
						value: '555.55'
					},
					{
						title: '待结算(元)',
						value: '555.55'
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: relative;
	}

	.pages-card {
		position: relative;
		z-index: 1;
		border-radius: 18rpx;
		overflow: hidden;
		margin: 0 auto 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.pages-bgimg {
		width: 750rpx;
		height: 678rpx;
		position: absolute;
		top: calc(678 - (678 - 490))rpx;
		left: 0;
		z-index: 0;
	}

	// 顶部 个人信息
	.my-top-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		z-index: 1;
		margin: 0 auto;

		.user-info {
			position: relative;

			.avatar {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				margin: auto;
				top: -86rpx;
				left: 0;
				right: 0;
				border: 2px solid #fff;
			}

			.level {
				width: 130rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				background: #00A191;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				color: #fff;
			}
		}
	}

	.list-box {
		.item-box {
			padding: 30rpx 0 30rpx;

			.item-targ {
				padding: 6rpx 10rpx;
				border-radius: 4rpx;
				color: #00A191;
				background-color: #E8FFFC;
			}
		}

		.item-link {
			border-bottom: 1px solid #EBEBEB;
		}


	}
</style>